<template>
  <div class="benefit-hb-history">
    <nav-bar>
      <div class="center" slot="center">历史红包</div>
    </nav-bar>
    <scroll class="scroll">
    <div class="main">
      <benefit-hb-history-item
        v-for="(item, index) in expiredHongbaos"
        :key="index"
        :item="item"
      />
    </div>
    </scroll>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import Scroll from 'components/common/betterScroll/Scroll'

import BenefitHbHistoryItem from "./childComps/BenefitHbHistoryItem";

import { getExpiredHongbaos } from "network/benefit";
export default {
  data() {
    return {
      expiredHongbaos: [],
    };
  },
  created() {
    this.getExpiredHongbaos(localStorage.getItem("user_id"));
  },
  methods: {
    getExpiredHongbaos(user_id) {
      getExpiredHongbaos(user_id).then((res) => {
        this.expiredHongbaos = res;
      });
    },
  },
  components: {
    NavBar,
    Scroll,
    BenefitHbHistoryItem,
  },
};
</script>
<style lang="less" scoped>
.benefit-hb-history {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #f1f1f1;
  .scroll {
    height: calc(100% - 44px);
    overflow: hidden;
  }

}
</style>